<template>
  <div>
    <div>
      <el-form ref="ruleFormRef" label-width="auto" label-position="left" status-icon size="small">
        <el-form-item v-for="item in props.struct" :label="item.name">
          <div  style="width: 100%;" v-if="item.childs.length == 0">
            <SettingConfigInputInfo v-model:modelValues="changeValues[item.field]" :placeholder="'请设置' + item.name"
              :mode="item.mode" :type="item.type" :options="item.options" :desc="item.desc"></SettingConfigInputInfo>
          </div>
          <div  style="width: 100%;" v-if="item.childs.length > 0 && item.mode != 'list'">
            <SettingConfigInfo v-model:datas="changeValues[item.field]" :struct="item.childs"></SettingConfigInfo>
          </div>
          <div  style="width: 100%;" v-if="item.childs.length > 0 && item.mode == 'list'">
            <SettingConfigTableInfo v-model:tableData="changeValues[item.field]" :columnChilds="item.childs"
              :desc="item.desc">
            </SettingConfigTableInfo>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang='ts' setup>
import SettingConfigInputInfo from './SettingConfigInputInfo.vue';
import SettingConfigTableInfo from './SettingConfigTableInfo.vue';
const props = defineProps({
  datas: {},
  struct: {}
})
const emits = defineEmits(['update:datas'])
const changeValues = ref()
watch(() => props.datas, () => {
  changeValues.value = props.datas
}, {
  immediate: true
})
watch(() => changeValues.value, () => {
  emits('update:datas', changeValues.value)
}, {
  immediate: true
})
</script>

<style lang='scss' scoped></style>